<template>
  <el-card class="module-card" :class="{ 'online': isOnline, 'offline': !isOnline }">
    <div class="module-header">
      <div class="module-title">
        <span class="module-icon">
          <i class="icon">⚙️</i>
        </span>
        <span class="module-name">{{ jarName }}</span>
      </div>
      <el-tag :type="isOnline ? 'success' : 'info'" effect="dark" size="small">
        {{ modelState }}
      </el-tag>
    </div>

    <div class="module-details">
      <div class="detail-row">
        <div class="detail-item">
          <span class="detail-label">内存：</span>
          <span class="detail-value">{{ jarMemoryUsage }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">PID：</span>
          <span class="detail-value">#{{ jarPid }}</span>
        </div>
      </div>
    </div>

    <div class="module-cmd">
      <div class="cmd-container">
        <el-tooltip effect="dark" :content="jarCmd" placement="top" :show-after="500">
          <code class="cmd-text">{{ `jar_cmd:${truncatedCmd}` }}</code>
        </el-tooltip>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface ModelType {
  jarName: string;
  modelState: string;
  jarMemoryUsage: string;
  jarPid: string;
  jarCmd: string;
}

const props = defineProps<ModelType>();

const isOnline = computed(() => props.modelState === '在线');

const truncatedCmd = computed(() => {
  return props.jarCmd.length > 50 ? props.jarCmd.substring(0, 50) + '...' : props.jarCmd;
});
</script>

<style scoped>
.module-card {
  width: 100%;
  margin: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  border: none;
  background: #ffffff;
}

.module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.module-card.online {
  border-top: 3px solid #10b981;
}

.module-card.offline {
  border-top: 3px solid #9ca3af;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.module-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-icon {
  font-size: 18px;
}

.module-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-details {
  margin: 16px 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.detail-item {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f9fafb;
  border-radius: 6px;
  padding: 8px 12px;
}

.detail-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  margin-right: 6px;
}

.detail-value {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.module-cmd {
  margin-top: 12px;
}

.cmd-container {
  background: #f3f4f6;
  border-radius: 6px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
}

.cmd-text {
  display: block;
  color: #374151;
  font-size: 12px;
  font-family: 'Monaco', 'Consolas', monospace;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.el-tag) {
  border: none;
  font-weight: 500;
}

:deep(.el-tag--success) {
  background-color: #10b981;
}

:deep(.el-tag--info) {
  background-color: #9ca3af;
}
</style>
